import React from 'react';
import { connect } from 'react-redux';
import BaseComponent from '../../components/common/baseComponent.js';
import bannerIcon from '../../../assets/images/cq/coupon/banner.png';
import step0 from '../../../assets/images/cq/coupon/1.png';
import step1 from '../../../assets/images/cq/coupon/2.png';
import step2 from '../../../assets/images/cq/coupon/3.png';
import step3 from '../../../assets/images/cq/coupon/4.png';
import newIcon from '../../../assets/images/cq/coupon/new.png';
import giftIcon from '../../../assets/images/cq/coupon/more_coupon_rd.png';
import { OLD_CQ_GIFT, OLD_COUPON_LIST, SERVICE_TEL } from '../../constants/setting';
import { callService } from '../../utils/func';

@connect(({ coupon, loading }) => {
  return {
    busy: ['coupon./getMoreCoupon', 'coupon/fetchMoreCouponInfo'].some(action => loading.effects[action]),
    num: coupon.getIn(['moreCoupon', 'num']),
  };
})
class MoreCoupon extends BaseComponent {
  componentDidMount() {
    this.props.dispatch({
      type: 'coupon/fetchMoreCouponInfo',
    });
  }

  goGiftPage = () => {
    window.location.href = OLD_CQ_GIFT;
  }

  getGift = () => {
    const { busy, num } = this.props;
    if (busy || num < 3) {
      return null;
    }
    this.props.dispatch({
      type: 'coupon/getMoreCoupon',
    });
  }

  goCouponList = () => {
    window.location.href = OLD_COUPON_LIST;
  }

  render() {
    const { num, busy } = this.props;
    let stepIcon;
    switch (num) {
      case 0:
        stepIcon = step0;
        break;
      case 1:
        stepIcon = step1;
        break;
      case 2:
        stepIcon = step2;
        break;
      default:
        stepIcon = step3;
        break;
    }
    return (
      <div className="more-coupon-cq">
        <div className="container">
          <img src={bannerIcon} alt="" className="banner" />
          <div className="progress-view">
            <img src={stepIcon} alt="" className="step" />
            <div className="btn-view">
              <div className={`action-btn ${stepIcon === step3 && !busy ? 'active' : ''}`} onClick={this.getGift}>立即领取</div>
              <div className="action-btn active" onClick={this.goCouponList}>我的卡券</div>
            </div>
          </div>
          <img src={newIcon} alt="" className="new-icon" />
          <img src={giftIcon} alt="" className="coupon-icon" onClick={this.goGiftPage} />
          <div className="title-row">
            <div className="line" />
            <div>使用规则</div>
            <div className="line" />
          </div>
          <p className="rule-text">
            1、车主每使用3张满减优惠券（不限面值），可触发领取1张200-20神券（有效期30天）；
          </p>
          <p className="rule-text">
            2、神券计入下一循环累计，即使用1张神券+2张任意加油满减券，可再次触发领取1张200-20神券；
          </p>
          <p className="rule-text">
            3、可用油站详见”一键加油“中的壳牌油站列表；
          </p>
          <p className="rule-text">
            4、活动有效期内，每使用3张券即可领取1张神券，不限制200-10神券的领取次数；
          </p>
          <p className="rule-text">
            5、按照用券次数触发领取。即一次支付中若使用3张券，即可领取1张神券；一次支付中使用4张券，立即领券1张神券，且只需再使用2张券，即可领取下一张神券。
          </p>
          <p className="rule-text">
            6、活动截止日期后，若有还未兑换的神券，取消累计。
          </p>
          <div className="footer" onClick={callService}>鱿鱼客服专线{SERVICE_TEL}</div>
        </div>
      </div>
    );
  }
}

export default MoreCoupon;
